<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BitPlay - 在浏览器内流畅播放Torrent</title>
    <meta
      name="description"
      content="BitPlay is a web-based torrent streaming application that allows you to stream torrents directly in your browser."
    />
    <link rel="icon" href="assets/favicon.png" type="image/png" />
    <link rel="stylesheet" href="assets/video-js.min.css" />
    <link rel="stylesheet" href="assets/butterup.min.css" />
    <link rel="stylesheet" href="assets/output.css" />
    <script>
      // set theme mode
      if (localStorage.getItem("theme") === "dark") {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.add("light");
      }
      // Read 'torrent' query parameter and set default value for magnet input
      document.addEventListener("DOMContentLoaded", function () {
        const urlParams = new URLSearchParams(window.location.search);
        const torrent = urlParams.get("torrent");
        if (torrent) {
          const decodedTorrent = decodeURIComponent(torrent);
          const magnetInput = document.getElementById("magnet");
          if (magnetInput) {
            magnetInput.value = decodedTorrent;
          }
        }
      });
    </script>
  </head>

  <body>
    <main
      class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex flex-col items-center"
    >
      <div class="flex justify-between w-full gap-4 mb-8 md:mb-15">
        <div class="flex items-center gap-3">
          <img src="assets/bitplay_logo.png" alt="logo" class="h-12 w-auto" />
          <span class="text-[24px] font-semibold">bitplay</span>
        </div>
        <div class="flex items-center gap-4">
          <button
            class="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 size-10"
            type="button"
            id="toggle_theme"
          ></button>
          <button
            class="inline-flex h-10 px-3 items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
            type="button"
            id="settings-btn"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-settings2 w-4 h-4"
            >
              <path d="M20 7h-9"></path>
              <path d="M14 17H5"></path>
              <circle cx="17" cy="17" r="3"></circle>
              <circle cx="7" cy="7" r="3"></circle>
            </svg>
            设置
          </button>
        </div>
      </div>
      <h1
        class="mb-8 text-3xl leading-[1.2] md:text-5xl max-w-xl text-center font-semibold bg-gradient-to-r from-primary to-[#00CCFF] text-transparent bg-clip-text"
      >
        轻松播放Torrent
      </h1>
      <div id="search-wrapper" class="hidden w-full">
        <form id="search-form" class="w-full flex items-center gap-3">
          <input
            class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-12 overflow-ellipsis overflow-hidden"
            placeholder="搜索..."
            id="search"
            name="search"
            type="search"
          />
          <button class="btn" type="submit">搜索</button>
        </form>
        <div
          id="search-result"
          class="mt-4 border rounded-lg overflow-auto max-h-[500px] bg-accent/50 hidden"
        >
          <table class="w-full caption-bottom text-sm">
            <thead>
              <tr class="bg-muted text-muted-foreground border-b">
                <th class="p-3 text-left">名称</th>
                <th class="p-3 text-left">索引器</th>
                <th class="p-3 text-left">大小</th>
                <th class="p-3 text-left">做种数</th>
                <th class="p-3 text-left w-[10px]"></th>
              </tr>
            </thead>
            <tbody
              id="search-result-body"
              class="divide-y [&_td]:px-3 [&_td]:py-2 [&_td]:whitespace-nowrap [&_td]:max-w-[200px] [&_td]:overflow-hidden [&_td]:text-ellipsis"
            >
              <tr>
                <td colspan="5" class="py-10 px-6 text-center">
                  未找到结果
                </td>
              </tr>
            </tbody>
            <tfoot class="hidden">
              <tr>
                <td colspan="5" class="py-10 px-6 text-center">
                  未找到结果
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div id="search-pagination" class="hidden"></div>
        <div
          class="w-full my-4 text-center text-sm font-semibold text-accent-foreground"
        >
          或者
        </div>
      </div>
      <form id="torrent-form" class="w-full flex items-center gap-3">
        <div class="relative w-full">
          <input
            class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-12 pr-12 overflow-ellipsis overflow-hidden"
            placeholder="磁力链接"
            id="magnet"
            name="magnet"
          />
          <button
            id="copy_magnet"
            class="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-10 absolute right-0 top-0 h-full w-12"
            type="button"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-clipboard-paste size-5"
            >
              <path
                d="M15 2H9a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1Z"
              ></path>
              <path
                d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2M16 4h2a2 2 0 0 1 2 2v2M11 14h10"
              ></path>
              <path d="m17 10 4 4-4 4"></path>
            </svg>
          </button>
        </div>
        <button class="btn" type="submit">立即播放</button>
      </form>
      <div
        id="demo_torrent"
        class="w-full rounded-lg p-3 text-center flex items-center gap-2 justify-center text-sm font-semibold text-accent-foreground border-2 mt-4 border-primary bg-secondary/50 cursor-pointer hover:bg-transparent transition-all"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-video w-6 h-6 inline-block"
        >
          <path
            d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"
          ></path>
          <rect x="2" y="6" width="14" height="12" rx="2"></rect>
        </svg>
        试看演示视频 Sintel (知识共享电影)
      </div>
      <div
        id="torrent_file_wrapper"
        class="w-full relative rounded-lg p-3 py-10 text-center flex flex-col items-center gap-4 justify-center text-sm font-semibold text-accent-foreground mt-7 border-2 border-foreground/30 border-dashed bg-secondary/50 cursor-pointer hover:bg-transparent transition-all"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-upload size-12 text-primary"
        >
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="17 8 12 3 7 8"></polyline>
          <line x1="12" x2="12" y1="3" y2="15"></line>
        </svg>
        <span class="text-sm text-accent-foreground font-bold"
          >拖拽您的torrent文件到此处，或
          <span class="text-primary">浏览</span>
        </span>
        <input
          type="file"
          class="opacity-0 size-full z-[1] absolute cursor-pointer"
          accept=".torrent"
          id="torrent_file"
        />
      </div>
      <video id="video-player" class="video-js mt-10 w-full"></video>
    </main>
    <div id="settings-model" class="fixed inset-0 z-[999] flex flex-col hidden">
      <!-- model overlay -->
      <div id="close-settings" class="absolute inset-0 bg-black/70"></div>
      <!-- model content -->
      <div
        class="p-6 bg-background rounded-xl shadow-lg w-full max-w-lg m-auto border z-[2]"
      >
        <div class="flex items-center justify-between mb-6">
          <h1 class="text-xl font-semibold">设置</h1>
          <button id="close-settings" type="button">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-x w-5 h-5"
            >
              <path d="M18 6 6 18"></path>
              <path d="m6 6 12 12"></path>
            </svg>
          </button>
        </div>
        <div class="flex gap-2 mb-7">
          <button
            class="tab-btn flex items-center gap-2 px-4 py-2 rounded-lg transition-colors border bg-primary text-primary-foreground"
            data-index="0"
            type="button"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-globe w-4 h-4"
            >
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
              <path d="M2 12h20"></path>
            </svg>
            <span>代理</span>
          </button>
          <button
            class="tab-btn flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-muted border"
            data-index="1"
            type="button"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-search w-4 h-4"
            >
              <circle cx="11" cy="11" r="8"></circle>
              <path d="m21 21-4.3-4.3"></path>
            </svg>
            <span>Prowlarr</span>
          </button>
          <button
            class="tab-btn flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-muted border"
            data-index="2"
            type="button"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-server w-4 h-4"
            >
              <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
              <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
              <line x1="6" x2="6.01" y1="6" y2="6"></line>
              <line x1="6" x2="6.01" y1="18" y2="18"></line>
            </svg>
            <span>Jackett</span>
          </button>
        </div>
        <form
          id="proxy-settings-form"
          data-tab="0"
          class="tab flex flex-col gap-6"
        >
          <label
            id="switchInput"
            for="enableProxy"
            class="flex items-center cursor-pointer"
          >
            <input id="enableProxy" type="checkbox" class="sr-only" />
            <div
              class="w-11 switch-wrapper h-6 border bg-accent rounded-full shadow-inner relative transition"
            >
              <div
                class="dot absolute size-5 bg-white rounded-full shadow left-[1px] top-[1px] transition"
              ></div>
            </div>
            <span class="ml-3 text-muted-foreground"> 启用代理 </span>
          </label>
          <div class="flex flex-col gap-2">
            <label
              for="proxy"
              class="text-muted-foreground text-sm font-semibold"
              >输入SOCKS5代理URL
            </label>
            <input
              type="text"
              id="proxyUrl"
              placeholder="socks5://用户名:密码@主机:端口"
              class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 pr-12 overflow-ellipsis overflow-hidden"
            />
          </div>
          <div id="proxy-result" class="hidden items-center gap-2">
            <span class="text-muted-foreground">IP地址:</span
            ><span class="output-ip text-primary"></span>
          </div>
          <div class="flex gap-2">
            <button
              type="button"
              id="test-proxy"
              class="flex items-center justify-center gap-2 px-4 py-2 flex-1 rounded-lg transition-colors bg-muted border font-medium text-sm"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-test-tube2 w-4 h-4"
              >
                <path
                  d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3"
                ></path>
                <path d="m16 2 6 6"></path>
                <path d="M12 16H4"></path>
              </svg>
              <span>测试代理</span>
            </button>
            <button type="submit" class="btn flex-1 !h-11">
              保存设置
            </button>
          </div>
        </form>
        <form
          id="prowlarr-settings-form"
          data-tab="1"
          class="tab flex flex-col gap-6 hidden"
        >
          <label
            id="switchInput"
            for="enableProwlarr"
            class="flex items-center cursor-pointer"
          >
            <input id="enableProwlarr" type="checkbox" class="sr-only" />
            <div
              class="w-11 switch-wrapper h-6 border bg-accent rounded-full shadow-inner relative transition"
            >
              <div
                class="dot absolute size-5 bg-white rounded-full shadow left-[1px] top-[1px] transition"
              ></div>
            </div>
            <span class="ml-3 text-muted-foreground"> 启用Prowlarr </span>
          </label>
          <div class="flex flex-col gap-2">
            <label
              for="prowlarrHost"
              class="text-muted-foreground text-sm font-semibold"
              >Prowlarr主机</label
            >
            <input
              type="text"
              id="prowlarrHost"
              placeholder="http://localhost:9117"
              class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 pr-12 overflow-ellipsis overflow-hidden"
            />
          </div>
          <div class="flex flex-col gap-2">
            <label
              for="prowlarrApiKey"
              class="text-muted-foreground text-sm font-semibold"
              >API密钥</label
            >
            <input
              type="text"
              id="prowlarrApiKey"
              placeholder="您的Prowlarr API密钥"
              class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 pr-12 overflow-ellipsis overflow-hidden"
            />
          </div>
          <div class="flex gap-2">
            <button
              type="button"
              id="test-prowlarr"
              class="flex items-center justify-center gap-2 px-4 py-2 flex-1 rounded-lg transition-colors bg-muted border font-medium text-sm"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-test-tube2 w-4 h-4"
              >
                <path
                  d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3"
                ></path>
                <path d="m16 2 6 6"></path>
                <path d="M12 16H4"></path>
              </svg>
              <span>测试连接</span>
            </button>
            <button type="submit" class="btn flex-1 !h-11">
              保存设置
            </button>
          </div>
        </form>
        <form
          id="jackett-settings-form"
          data-tab="2"
          class="tab flex flex-col gap-6 hidden"
        >
          <label
            id="switchInput"
            for="enableJackett"
            class="flex items-center cursor-pointer"
          >
            <input id="enableJackett" type="checkbox" class="sr-only" />
            <div
              class="w-11 switch-wrapper h-6 border bg-accent rounded-full shadow-inner relative transition"
            >
              <div
                class="dot absolute size-5 bg-white rounded-full shadow left-[1px] top-[1px] transition"
              ></div>
            </div>
            <span class="ml-3 text-muted-foreground"> 启用Jackett </span>
          </label>
          <div class="flex flex-col gap-2">
            <label
              for="jackettHost"
              class="text-muted-foreground text-sm font-semibold"
              >Jackett主机</label
            >
            <input
              type="text"
              id="jackettHost"
              placeholder="http://localhost:9117"
              class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 pr-12 overflow-ellipsis overflow-hidden"
            />
          </div>
          <div class="flex flex-col gap-2">
            <label
              for="jackettApiKey"
              class="text-muted-foreground text-sm font-semibold"
              >API密钥</label
            >
            <input
              type="text"
              id="jackettApiKey"
              placeholder="您的Jackett API密钥"
              class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 pr-12 overflow-ellipsis overflow-hidden"
            />
          </div>
          <div class="flex gap-2">
            <button
              type="button"
              id="test-jackett"
              class="flex items-center justify-center gap-2 px-4 py-2 flex-1 rounded-lg transition-colors bg-muted border font-medium text-sm"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-test-tube2 w-4 h-4"
              >
                <path
                  d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3"
                ></path>
                <path d="m16 2 6 6"></path>
                <path d="M12 16H4"></path>
              </svg>
              <span>测试连接</span>
            </button>
            <button type="submit" class="btn flex-1 !h-11">
              保存设置
            </button>
          </div>
        </form>
      </div>
    </div>
    <script src="assets/video.min.js"></script>
    <script src="assets/videojs.hotkeys.min.js"></script>
    <script src="assets/butterup.min.js"></script>
    <script type="module" src="assets/index.js"></script>
  </body>
</html>
